<template>
  <ScaleBox>
    <div class="layout">
      <div class="header">
        <div class="headerFont">中材锂膜产线成本费用看板</div>
      </div>
      <div class="middleContent">
        <div class="middleLeft">
          <div class="singleF">
            <div v-for="(item,index) in itemArr" class="singleG">
              <div class="singleC">{{item.name}}</div>
              <div class="singleB">
                <div class="singleA" v-for="(i,d) in item.valueArr">
                  <div class="buttonTag">{{i.indexName+' '+i.unit}}</div>
                  <Slider :currentValue="i.latestValue"
                          :targetValue="i.targetValue"
                          :maxValue="i.maxValue"
                          @change="(val)=>handleChange(i.indexName,val)"
                          :minValue="i.minValue"
                          :indexName="i.indexName"
                  ></Slider>
                </div>
              </div>

            </div>
          </div>
        </div>
        <div style="width: 49%;height: 100%;margin-top: 0.5%">
          <div class="rightTop">
            <div class="waterfallFont">A品单位制造成本瀑布图</div>
            <div id="echartsId"></div>
          </div>
          <div class="bottom">
            <table style="width: 98%;margin: 7% auto 0 auto;height: 83%">
              <tr class="trHeader">
                <td v-for="item in tableField" class="tdHeader">
                  {{item}}
                </td>
              </tr>
              <tr class="trContent" v-for="item in tableData">
                <td class="tdHeader">
                  {{item.CHE}}
                </td>
                <td class="tdHeader">
                  {{item.ZS}}
                </td>
                <td class="tdHeader">
                  {{item.YWC}}
                </td>
                <td class="tdHeader">
                  {{item.WCJG}}
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>

    </div>
    <!--  <div>-->

    <!--  </div>-->

  </ScaleBox>
</template>

<script>
    import ScaleBox from "./ScaleBox.vue"
    import Slider from "./Slider.vue"
    import {
        getIndexBaseDataset,
        getWaterfallChartDataset,
        getWaterfallChartDatasetByIndexValue,
    } from "@/api/idss/costDashboard/index";

    getIndexBaseDataset
    export default {
        name: "index",
        components: {
            ScaleBox,
            Slider,
        },
        data() {
            return {
                tableField: ['成本项', '总数', '已完成数', '完成进度'],
                tableData: [
                    {
                        CHE: 'oee',
                        ZS: '20123',
                        YWC: '668',
                        WCJG: '90%',
                    },
                    {
                        CHE: 'oee',
                        ZS: '20123',
                        YWC: '668',
                        WCJG: '90%',
                    },
                    {
                        CHE: 'oee',
                        ZS: '20123',
                        YWC: '668',
                        WCJG: '90%',
                    },
                    {
                        CHE: 'oee',
                        ZS: '20123',
                        YWC: '668',
                        WCJG: '90%',
                    },
                    {
                        CHE: 'oee',
                        ZS: '20123',
                        YWC: '668',
                        WCJG: '90%',
                    },
                    {
                        CHE: 'oee',
                        ZS: '20123',
                        YWC: '668',
                        WCJG: '90%',
                    },
                    {
                        CHE: 'oee',
                        ZS: '20123',
                        YWC: '668',
                        WCJG: '90%',
                    }
                ],
                value1: 30,
                itemArr: [
                    {
                        name: 'OEE',
                        valueArr: [
                            {
                                indexName: "收卷产量",
                                unit: "万m³",
                                latestValue: 30,
                                targetValue: 66,
                                maxValue: 100,
                                minValue: 0,
                            },
                            {
                                indexName: "A品产量",
                                unit: "万m³",
                                latestValue: 30,
                                targetValue: 66,
                                maxValue: 100,
                                minValue: 0,
                            },
                            {
                                indexName: "车速",
                                unit: "万m³",
                                latestValue: 30,
                                targetValue: 66,
                                maxValue: 100,
                                minValue: 0,
                            },
                            {
                                indexName: "收卷产量",
                                unit: "万m³",
                                latestValue: 30,
                                targetValue: 66,
                                maxValue: 100,
                                minValue: 0,
                            },
                            {
                                indexName: "收卷产量",
                                unit: "万m³",
                                latestValue: 30,
                                targetValue: 66,
                                maxValue: 100,
                                minValue: 0,
                            },
                            {
                                indexName: "收卷产量",
                                unit: "万m³",
                                latestValue: 30,
                                targetValue: 66,
                                maxValue: 100,
                                minValue: 0,
                            },
                            {
                                indexName: "收卷产量",
                                unit: "万m³",
                                latestValue: 30,
                                targetValue: 66,
                                maxValue: 100,
                                minValue: 0,
                            },
                            {
                                indexName: "收卷产量",
                                unit: "万m³",
                                latestValue: 30,
                                targetValue: 66,
                                maxValue: 100,
                                minValue: 0,
                            },
                            {
                                indexName: "收卷产量",
                                unit: "万m³",
                                latestValue: 30,
                                targetValue: 66,
                                maxValue: 100,
                                minValue: 0,
                            },

                        ]
                    },
                    {
                        name: 'MUR',
                        valueArr: [
                            {
                                indexName: "收卷产量",
                                unit: "万m³",
                                latestValue: 30,
                                targetValue: 66,
                                maxValue: 100,
                                minValue: 0,
                            },
                            {
                                indexName: "收卷产量",
                                unit: "万m³",
                                latestValue: 30,
                                targetValue: 66,
                                maxValue: 100,
                                minValue: 0,
                            }
                        ]
                    },
                    {
                        name: 'CQJ',
                        valueArr: [
                            {
                                indexName: "收卷产量",
                                unit: "万m³",
                                latestValue: 30,
                                targetValue: 66,
                                maxValue: 100,
                                minValue: 0,
                            }
                        ]
                    },
                    {
                        name: 'ECO',
                        valueArr: [
                            {
                                title: '水耗量',
                                indexName: "水耗量",
                                unit: "吨/天",
                                latestValue: 30,
                                targetValue: 66,
                                maxValue: 100,
                                minValue: 0,
                            },
                            {

                                indexName: "收卷产量",
                                unit: "万m³",
                                latestValue: 30,
                                targetValue: 66,
                                maxValue: 100,
                                minValue: 0,
                            },
                            {
                                indexName: "收卷产量",
                                unit: "万m³",
                                latestValue: 30,
                                targetValue: 66,
                                maxValue: 100,
                                minValue: 0,
                            },
                        ]
                    },
                    {
                        name: 'HRE',
                        valueArr: [
                            {
                                title: '人工成本 万m³',
                                indexName: "人工成本",
                                unit: "万元",
                                latestValue: 30,
                                targetValue: 66,
                                maxValue: 100,
                                minValue: 0,
                            }
                        ]
                    },
                    {
                        name: '包装',
                        valueArr: [
                            {
                                indexName: "包材",
                                unit: "万元",
                                latestValue: 30,
                                targetValue: 66,
                                maxValue: 100,
                                minValue: 0,
                            }
                        ]
                    },
                    {
                        name: '其他',
                        valueArr: [
                            {
                                indexName: "制费费用",
                                unit: "万元",
                                latestValue: 30,
                                targetValue: 66,
                                maxValue: 100,
                                minValue: 0,
                            },
                            {
                                indexName: "折旧成本",
                                unit: "万元",
                                latestValue: 30,
                                targetValue: 66,
                                maxValue: 100,
                                minValue: 0,
                            }
                        ]
                    },

                ],
                ///左侧滑动数据集合
                indexParams: {}
            }
        },
        mounted() {
            this.getIndexBaseDatasets()
            this.$nextTick(() => {
                this.getWaterfallChartDatasets()
                this.drawEcharts()
            })
        },
        methods: {
            handleChange(indexName, val) {
                // this.$set(i, 'currentValue', val)

               console.log(indexName,'indexName')
                this.indexParams[indexName]=val
                for (let type of this.itemArr) {
                    for (let one of type.valueArr) {
                        if (one.indexName == indexName) {
                            one.latestValue =val
                        }
                    }
                }
                this.getWaterfallChartDatasetByIndexValues()
            },
            //费用看板指标信息
            getIndexBaseDatasets() {
                let param = {
                    lineCode: 'TZY09'
                }
                getIndexBaseDataset(param).then((res) => {
                    let arr = res.data
                    console.log("arr ", arr)
                    let indexParam = {}
                    for (let type of arr) {
                        for (let one of type.valueArr) {
                            indexParam[one.indexName] = one.latestValue
                            one.title = one.indexName + " " + one.unit
                            one.minValue = 0
                            one.currentValue = one.latestValue
                            one.maxValue = one.targetValue * 1.5
                        }


                    }
                    this.indexParams = indexParam
                    this.itemArr = arr
                    console.log("this.itemArr ", this.itemArr)
                })
            },
            //初始瀑布图
            getWaterfallChartDatasets() {
                let param = {
                    factory: '滕州工厂',
                    workshop: '6车间',
                    lineCode: 'TZY09',
                }
                getWaterfallChartDataset(param).then((res) => {
                    let x_data = [];
                    let y_data = [];
                    for (const re of res.data) {

                        x_data.push(re.name.replace("耗量", ""))
                        y_data.push(re.value)
                    }

                    this.drawEcharts(x_data, y_data)
                })
            },
            //修改拖拽左侧指标后获取瀑布图内容
            getWaterfallChartDatasetByIndexValues() {
                this.indexParams.factory = '滕州工厂'
                this.indexParams.workshop = '6车间'
                this.indexParams.lineCode = 'TZY09'

                getWaterfallChartDatasetByIndexValue(this.indexParams).then((res) => {
                    let x_data = [];
                    let y_data = [];
                    for (const re of res.data.waterfallChartDataset) {
                        x_data.push(re.name.replace("耗量", ""))
                        y_data.push(re.value)
                    }
                    //修改”收卷产量“和”A品产量的数据
                    for (let type of this.itemArr) {
                        for (let one of type.valueArr) {
                            if (one.indexName == "收卷产量") {
                                one.latestValue = res.data.volumeProduction
                            }
                            if (one.indexName == "A品产量") {
                                one.latestValue = res.data.realAProduct

                            }
                        }
                    }
                    console.log("x_data",x_data)
                    console.log("y_data",y_data)

                    this.drawEcharts(x_data, y_data)
                })
            },
            drawEcharts(xData, data1) {
                console.log("画图")
                const color = ['#728BE1', '#71ABDB', '#fff'];
                if (data1 == null) {
                    data1 = [6000, 2000, 500, 200, 600, 400, 1000, 500, 800];

                }
                if (xData == null) {
                    xData = ['实际成本', '车速', '长度利用率', '开机率', '分切利用率', 'A品率', 'PE', '白油', 'CQJ', '水', '电', '蒸汽', '包材', '人工', '制费', '折旧', '目标成本']

                }
                const data2 = [];
                let temp = 0;
                data1.map((item, index) => {
                    data2.push(temp);
                    if (index === 0) {
                        temp = item
                    }
                    temp = temp - data1[index + 1];
                });
                console.log(data2);
                let option = {
                    // 设置图表的位置
                    grid: {
                        x: 0, // 左间距
                        x2: 0, // 右间距
                        y: 100, // 上间距
                        y2: 0, // 下间距
                        // grid 区域是否包含坐标轴的刻度标签
                        // 这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，
                        // 可能会溢出容器或者覆盖其他组件
                        containLabel: true,
                    },
                    // 图表主标题
                    title: {
                        show: false
                    },
                    // 提示框组件
                    tooltip: {
                        trigger: 'axis', // 触发类型, axis: 坐标轴触发
                        textStyle: {
                            fontSize: 14,
                            color: '#494A68', // 文字颜色
                        },
                        // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
                        // 折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
                        formatter: '{b1}: {c1}万',
                    },
                    // X轴
                    xAxis: {
                        type: 'category', // 坐标轴类型,  'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据
                        // 坐标轴轴线
                        axisLine: {
                            lineStyle: {
                                type: 'solid', // 坐标轴线线的类型 'solid', 'dashed', 'dotted'
                                color: 'rgba(182, 183, 195, 0.38)', // 坐标轴线线的颜色
                            },
                        },
                        // 坐标轴刻度
                        axisTick: {
                            show: false,
                        },
                        // 分隔线
                        splitLine: {
                            show: false,
                        },
                        // 坐标轴刻度标签
                        axisLabel: {
                            interval: 0, // 坐标轴刻度标签的显示间隔
                            fontSize: 12, // 文字的字体大小
                            color: '#fff', // 刻度标签文字的颜色
                            fontFamily: 'pangmen',
                        },
                        // 类目数据，在类目轴（type: 'category'）中有效
                        data: xData,
                    },
                    // Y轴
                    yAxis: {
                        type: 'value', // 坐标轴类型,   'value' 数值轴，适用于连续数据
                        show: false,
                        // 坐标轴在图表区域中的分隔线
                        splitLine: {
                            show: false, // 是否显示分隔线, 默认数值轴显示
                            lineStyle: {
                                type: 'solid', // 坐标轴线线的类型 'solid', 'dashed', 'dotted'
                                color: 'rgba(182, 183, 195, 0.38)', // 坐标轴线线的颜色
                            },
                        },
                        // 坐标轴轴线
                        axisLine: {
                            show: false,
                            lineStyle: {
                                type: 'solid', // 坐标轴线线的类型 'solid', 'dashed', 'dotted'
                                color: 'rgba(182, 183, 195, 0.38)', // 坐标轴线线的颜色
                            },
                        },
                        // 坐标轴刻度
                        axisTick: {
                            show: false,
                        },
                        // 坐标轴刻度标签
                        axisLabel: {
                            color: '494A68',
                        },
                    },
                    series: [
                        {
                            type: 'bar', // 系列类型
                            name: '辅助', // 系列名称, 用于tooltip的显示, legend 的图例筛选
                            // 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
                            stack: '金额',
                            barWidth: 15, // 柱条的最大宽度，不设时自适应
                            // 图形样式
                            itemStyle: {
                                normal: {
                                    color: 'rgba(0,0,0,0)', // 柱条的颜色
                                },
                            },
                            data: data2 // 系列中的数据内容数组
                        },
                        {
                            type: 'bar', // 系列类型
                            name: '运营管理', // 系列名称, 用于tooltip的显示, legend 的图例筛选
                            // 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
                            stack: '金额',
                            barWidth: 19, // 柱条的最大宽度，不设时自适应
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置在柱子顶部
                                textStyle: {
                                    fontSize: 14,
                                    fontFamily: 'PingFangSC',
                                    color: '#fff',
                                }
                            },
                            // 图形的样式
                            itemStyle: {
                                color: (val) => {
                                    if (val.dataIndex !== 16) {
                                        return '#007dd5';
                                    } else {
                                        return '#ff7b00';
                                    }
                                },
                            },
                            // 系列中的数据内容数组
                            data: data1
                        },
                    ],
                };
                // 基于准备好的dom，初始化echarts实例
                const myChart = this.$echarts.init(document.getElementById('echartsId'));
                // 绘制图表
                myChart.setOption(option,true);
                // 监听窗口变化，调整图表大小
                window.addEventListener('resize', () => {
                    myChart.resize();
                });

            }
            ,
        }
    }
</script>

<style scoped lang="scss">
  .layout {
    height: 100%;
    width: 100%;
  }

  .header {
    background: url(../../assets/costDashboard/top.png) 0 0 no-repeat;
    height: 80px;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .headerFont {
    font-size: 34px;
    font-family: pangmen;
    color: transparent;
    /* 使用背景渐变 */
    background: linear-gradient(0deg, #FFFFFF 0%, #37B9FF 100%);;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .buttonTag {
    background: url(../../assets/costDashboard/button.png) 0 0 no-repeat;
    background-size: 100% 100%;
    color: #ffffff;
    width: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .middleContent {
    width: 99%;
    margin: -1% auto 0 auto;
    display: flex;
    justify-content: space-around;
    height: calc(100% - 80px);
  }

  .middleLeft {
    //height: calc(60% - 20px );
    height: 100%;
    width: 49%;
    background: url(../../assets/costDashboard/left.png) 0 0 no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
  }

  .rightTop {
    height: 50%;
    width: 99%;
    background: url(../../assets/costDashboard/right.png) 0 0 no-repeat;
    background-size: 100% 100%;
    position: relative;
  }

  .bottom {
    width: 100%;
    margin: 0 auto 0 auto;
    height: 48.8%;
    background: url(../../assets/costDashboard/bottom.png) 0 0 no-repeat;
    background-size: 100% 100%;
    display: inline-block;
  }

  .waterfallFont {
    position: absolute;
    top: 7%;
    color: #ffffff;
    font-size: 20px;
    font-family: YouSheBiaoTiHei;
    left: 55px;
  }

  table {
    text-align: center;
    border-collapse: collapse;
  }

  .trHeader {
    background: linear-gradient(180deg, #204089 0%, rgba(0, 74, 243, 0.12) 100%);
    width: 100%;
  }

  .tdHeader {
    width: 25%;
    font-size: 17px;
    color: #fff;
    height: 11%;
    font-family: PingFangSC;
  }

  .trContent {
    font-size: 20px;
    color: #fff;
    background: #00244d;
    border-bottom: 1px solid #0099ff;
    font-family: PingFangSC;
  }

  .trContent:last-of-type {
    border: none;
  }

  #echartsId {
    height: 90%;
    width: 98%;
    position: absolute !important;
    top: 6%;
    left: -2%;
  }

  .singleF {
    width: 97%;
    height: 100%;
    margin: 4% auto 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .singleA {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }

  .singleG {
    display: flex;
    flex-wrap: wrap;
  }

  .singleC {
    color: #ffffff;
    width: 8%;
    background: url(../../assets/costDashboard/2.png) 0 0 no-repeat;
    background-size: 100% 100%;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl; /* 垂直方向，从右到左 */
    text-orientation: upright; /* 文字方向，保持直立 */
    min-height: 60px;
  }

  .singleB {
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-left: 2%;
  }
</style>
